<template>
  <div class="action-container"
       :class="[isMini ? 'mini-bar' : 'normal-bar']">
    <div class="action-left action-icon">
      <i class="iconfont"
         @click="prev">{{ isMini ? '&#xe604;' : '&#xe632;'}}</i>
      <template v-if="isPlaying">
        <i class="iconfont"
           @click="pause">{{ isMini ? '&#xe6b2;' : '&#xe80c;'}}</i>
      </template>
      <template v-else>
        <i class="iconfont"
           @click="play">{{ isMini ? '&#xe61f;' : '&#xe671;'}}</i>
      </template>
      <i class="iconfont"
         @click="next">{{ isMini ? '&#xe6b1;' : '&#xe652;'}}</i>
    </div>
    <div class="progress"
         ref="progress"
         @click="progressClick($event)">
      <div class="music-info"
           v-if="isNormal">
        <div class="music-name">{{name}} - {{singer}}</div>
        <div class="progress-rate">{{formatTime(currentTime)}} / {{formatTime(duration)}}</div>
      </div>
      <div class="running"
           ref="runProgress"
           :style="{width: progressPoint}">
        <div class="progress-point"
             @mousedown.prevent="mousedownEvent"></div>
      </div>
    </div>
    <div class="action-right action-icon">
      <i class="iconfont"
         @click="changeLoopEmit">{{['&#xe8e3;','&#xe860;','&#xe60a;'][loop]}}</i>
      <template v-if="isNormal">
        <i class="iconfont">&#xe64f;</i>
        <div class="voice-progress"
             ref="voiceProgress"
             @click="voiceProgressClick($event)">
          <div class="voice-running"
               :style="{width: `${volume*100}%`}">
            <div class="voice-progress-point"></div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    scences: {
      type: String,
      default: 'mini'
    },
    loop: {
      type: Number,
      default: 0
    },
    isPlaying: {
      type: Boolean,
      default: false
    },
    prev: {
      type: Function,
      default: false
    },
    pause: {
      type: Function,
      default: false
    },
    play: {
      type: Function,
      default: false
    },
    next: {
      type: Function,
      default: false
    },
    progressWidth: {
      type: String,
      default: '0%'
    },
    currentTime: {
      type: Number,
      default: 0
    },
    duration: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: ''
    },
    singer: {
      type: String,
      default: ''
    },
    moveEvent: {
      type: Function,
      default: () => { }
    },
    volume: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      progressClientWidth: 0,
      runClientWidth: 0,
      progressMidWidth: 0,
      move: false,
      offsetX: 0,
      startX: 0
    }
  },
  computed: {
    isMini () {
      return this.scences === 'mini'
    },
    isNormal () {
      return this.scences === 'normal'
    },
    progressPoint () {
      if (this.move === true && this.offsetX) {
        return `${this.point * 100}%`
      }
      return this.progressWidth
    },
    point () {
      const point = Math.min(Math.max(this.runClientWidth + this.offsetX, 0), this.progressClientWidth)
      return point / this.progressClientWidth
    }
  },
  methods: {
    changeLoopEmit () {
      this.$emit('changeLoopEmit')
    },
    formatTime (time) {
      const m = Math.floor(time / 60)
      const minute = m < 10 ? `0${m}` : m;
      const s = parseInt(time % 60)
      const second = s < 10 ? `0${s}` : s;
      return `${minute}:${second}`
    },
    mousedownEvent (event) {
      event.stopPropagation()
      event.preventDefault()
      const _this = this
      this.mousestartEvent(event)
      addEventListener('mousemove', function (e) {
        _this.mousemoveEvent(e);
      });
      addEventListener('mouseup', function () {
        _this.mouseupEvent();
      });
    },
    mousestartEvent (event) {
      this.move = true
      this.startX = event.clientX
      this.progressClientWidth = this.$refs.progress.clientWidth
      this.runClientWidth = this.$refs.runProgress.clientWidth
    },
    mousemoveEvent (event) {
      if (this.move === false) {
        return
      }
      this.offsetX = event.clientX - this.startX
    },
    mouseupEvent () {
      if (this.move === false) {
        return
      }
      this.moveEvent(this.point)
      setTimeout(() => {
        this.move = false
        this.offsetX = 0
      }, 50)
      removeEventListener('mousemove', this.mousemoveEvent)
      removeEventListener('mouseup', this.mouseupEvent)
    },
    progressClick (event) {
      if (this.move === true) {
        return
      }
      const progressClientWidth = this.$refs.progress.clientWidth
      this.moveEvent(event.offsetX / progressClientWidth)
    },
    voiceProgressClick (event) {
      const progressClientWidth = this.$refs.voiceProgress.clientWidth
      this.$player.changeVolume(event.offsetX / progressClientWidth)
    }
  }
}
</script>

<style lang="scss" scoped>
*[draggable="true"] {
  -khtml-user-drag: element;
}
.action-container {
  position: relative;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  font-size: 18px;
  width: 100%;
  .action-icon {
    font-size: 18px;
    i {
      cursor: pointer;
    }
  }
  .action-left {
    position: absolute;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .action-right {
    position: absolute;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .voice-progress {
      width: 100px;
      height: 3px;
      background-color: #a7a4a4;
      cursor: pointer;
      .voice-running {
        background: #e91e63;
        position: relative;
        height: 3px;
        .voice-progress-point {
          position: absolute;
          z-index: 2;
          display: inline-block;
          border-radius: 50%;
          cursor: pointer;
          background: #e91e63;
          right: -3px;
          top: -2.1px;
          width: 8px;
          height: 8px;
        }
      }
    }
  }
  .progress {
    flex: 1;
    background-color: #a7a4a4;
    .running {
      position: relative;
      background-color: #fff;
      height: 3px;
      .progress-point {
        position: absolute;
        z-index: 2;
        display: inline-block;
        border-radius: 50%;
        background-color: #fff;
      }
    }
  }
}
.normal-bar {
  padding: 0 420px 0 240px;
  z-index: 20;
  .action-icon {
    i {
      font-size: 32px;
    }
  }
  .action-left {
    width: 240px;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 0 20px;
    margin-top: 6px;
    i {
      margin: 0 8px;
    }
  }
  .action-right {
    width: 420px;
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 0 20px;
    i {
      margin: 0 8px;
    }
  }
  .progress {
    height: 4px;
    position: relative;
    box-sizing: border-box;
    margin-top: 23px;
    cursor: pointer;
    .music-info {
      position: absolute;
      top: -28px;
      font-size: 13px;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .running {
      height: 4px;
      background: #e91e63;
      .progress-point {
        cursor: pointer;
        background: #e91e63;
        right: -7.5px;
        top: -5px;
        width: 15px;
        height: 15px;
      }
    }
  }
}
.mini-bar {
  padding: 0 40px 0 60px;
  display: flex;
  align-items: center;
  .action-left {
    width: 60px;
  }
  .action-right {
    width: 40px;
  }
  .progress {
    height: 3px;
    .running {
      height: 3px;
      .progress-point {
        cursor: move;
        right: -3.5px;
        top: -2px;
        width: 7px;
        height: 7px;
      }
    }
  }
}
</style>